<template>
    <div class="nei">
      <div class="box1">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">房产管理</el-breadcrumb-item>
        <el-breadcrumb-item>房产改造</el-breadcrumb-item>
        
      </el-breadcrumb>
      <h2 style="margin-top: 15px;">改造记录</h2>
      <!-- <div>
        <input type="text" placeholder="用户名">
        <el-button @click="change">查询</el-button>
      </div> -->
      <div style="margin-top: 25px;">
        <el-row>
            <el-col :span="24">
              <div class="grid-content  contentTitle">
            <el-button class="add" type="primary"  icon="el-icon-plus" @click="dialogFormVisible = true" >新增改造</el-button>
            <el-input class="goIn" v-model="input" placeholder="请输入编码或名称" ></el-input>
            
            
            <el-button type="primary" @click="getList" class="contentTitleSearch">查询</el-button>
           
            <div class="dr">
              <!-- <el-button type="primary" plain >批量导入</el-button> -->
              
            <el-button type="primary" plain>导出excel</el-button>
            </div>
              </div>
          </el-col>
          
        </el-row>
      </div>
  
      <!-- 显示用户数据 -->
      <div class="content">
        <el-table :data="houseReformList" border stripe style="width: 100%" @selection-change="handleSelectionChangeDepartment">
          <el-table-column type="selection" width="50" header-align="center" align="center"> </el-table-column>
          <el-table-column prop="hpNumber" label="编码" width="150" header-align="center" align="center"> </el-table-column>
          <el-table-column prop="hpName" label="名称" width="150" header-align="center" align="center"> </el-table-column>
          <el-table-column prop="hpHave" label="是否拥有房产证" width="150" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.hpHave==0?"是":"否" }}
            </template>
          </el-table-column>
          <el-table-column prop="hpProperty" label="产权性质" width="150" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.hpProperty==0?"集体所有房产":scope.row.hpProperty==1?"私有房产":"联营房产" }}
            </template>
          </el-table-column>
          <el-table-column prop="hpAddress" label="房屋坐落" width="150" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpStructure" label="房屋结构" width="150" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpLayer" label="层数" width="150" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpArea" label="建筑面积(㎡)" width="150" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpInsideArea" label="套内建筑面积(㎡)" width="150" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpRenovationStartTime" label="改造开始时间" width="150" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpRenovationEndTime" label="改造结束时间" width="150" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="warning" circle class="el-icon-search" @click="lookDialog(scope.row.id)"></el-button>
              <el-button type="primary" icon="el-icon-edit" circle  @click="editDialog(scope.row.id)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="removeHouseById(scope.row.id)" ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 批量删除以及分页 -->
      <el-row style="margin-top: 18px;">
        <el-col :span="24">
          <div class="grid-content  bottomDelete" >
            <el-button type="danger" @click="removeHouseByIds" style="float: left;border-radius: 8px;">批量删除</el-button>
            <el-footer style="float: right;">
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange"
              :current-page="currentPage" :page-size="pageSize">
            </el-pagination>
          </el-footer>
          </div>
        </el-col>
  
      </el-row>
  
      <!--添加对话框 -->
      <el-dialog title="新增改造" :visible.sync="dialogFormVisible" @close="addDialogClosed" center>
        <el-form ref="addFormRef" center>
          <el-row>
            <el-col :span="24">
              <div class="grid-content  contentTitle">
            <el-input class="goIn2" v-model="input" placeholder="请输入编码或名称" ></el-input>
            <el-button type="primary" @click="getData" class="contentTitleSearch">查询</el-button>
              </div>
           </el-col>
          </el-row>
          <el-table :data="housePropertyList" border stripe style="width: 100%" @selection-change="handleSelectionChangeDepartment" >
          <el-table-column type="selection" width="50" header-align="center" align="center"> </el-table-column>
          <el-table-column prop="hpNumber" label="编码" width="130" header-align="center" align="center"> </el-table-column>
          <el-table-column prop="hpName" label="名称" width="134" header-align="center" align="center"> </el-table-column>
          <el-table-column prop="hpHave" label="是否拥有房产证" width="130" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.hpHave==0?"是":"否" }}
            </template>
          </el-table-column>
          <el-table-column prop="hpProperty" label="产权性质" width="140" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.hpProperty==0?"集体所有房产":scope.row.hpProperty==1?"私有房产":"联营房产" }}
            </template>
          </el-table-column>
          <el-table-column prop="hpAddress" label="房屋坐落" width="130" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpStructure" label="房屋结构" width="130" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpLayer" label="层数" width="125" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpArea" label="建筑面积(㎡)" width="130" header-align="center" align="center"></el-table-column>
          <el-table-column prop="hpInsideArea" label="套内建筑面积(㎡)" width="130" header-align="center" align="center"></el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :total="addTotal" @current-change="addHandleCurrentChange" @size-change="addHandleSizeChange"
              :current-page="addCurrentPage" :page-size="addPageSize">
            </el-pagination>
          <el-row>
            <el-col :span="24">
              <div class="grid-content  contentTitle2">
            <span class="change2">改造时间:</span>
            <el-date-picker v-model="addForm.value1" type="daterange" range-separator="--" start-placeholder="开始日期"
                  end-placeholder="结束日期">
            </el-date-picker>
            
              </div>
           </el-col>
          </el-row>
          <el-form-item prop="hpTransformationContent" label="改造原因:"  >
              <el-input v-model="addForm.text" type="textarea" :rows="4"  autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addReform" >添 加</el-button>
        </div>
      </el-dialog>
  
  
       <!-- 修改 -->
       <el-dialog title="编辑房产" :visible.sync="iconFormVisible" width="650px"  center>
        <el-form :model="editForm" ref="editFormRef" center>
          <el-form-item  label="编码:"  class="addContent"  :label-width="formLabelWidth">
            <el-input v-model="editForm.hpNumber" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item  label="房产名称:" class="addContent"  :label-width="formLabelWidth">
            <el-input v-model="editForm.hpName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="是否拥有房产证:" class="addContent"  :label-width="formLabelWidth">
            <el-radio v-model="editForm.hpHave" value="0" label="0">是</el-radio>
            <el-radio v-model="editForm.hpHave" value="1" label="1">否</el-radio>
          </el-form-item>
          <el-form-item  label="产权性质:"  class="addContent"  :label-width="formLabelWidth">
            <el-select v-model="editForm.hpProperty" placeholder="请选择">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="房屋坐落:" class="addContent"  :label-width="formLabelWidth">
            <el-input v-model="editForm.hpAddress" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="房屋结构:" class="addContent"  :label-width="formLabelWidth">
            <el-input v-model="editForm.hpStructure" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="层数:" class="addContent"  :label-width="formLabelWidth">
            <el-input v-model="editForm.hpLayer" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item  label="建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
            <el-input  v-model="editForm.hpArea" autocomplete="off" placeholder="㎡"></el-input>
          </el-form-item>
          <el-form-item  label="套内建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
            <el-input  v-model="editForm.hpInsideArea" autocomplete="off" placeholder="㎡"></el-input>
          </el-form-item>
          <el-form-item  label="状态:" class="addContent"  :label-width="formLabelWidth">
            <el-radio v-model="editForm.hpPropertyStatus"  label="0">正常</el-radio>
            <el-radio v-model="editForm.hpPropertyStatus"  label="1">已核销</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
          <el-button @click="iconFormVisible = false">取 消</el-button>
          <el-button @click="editHouse" type="primary" >确 定</el-button>
        </div>
      </el-dialog>
  
  <!-- 查看详情 -->
  <el-dialog title="查看详情" :visible.sync="dialogVisible" width="650px"  center>
        <el-form :model="lookForm" ref="editFormRef" center>
          <el-form-item  label="编码:"  class="addContent"  :label-width="formLabelWidth">
            <el-input v-model="lookForm.hpNumber" autocomplete="off" :disabled="true" ></el-input>
          </el-form-item>
          <el-form-item  label="房产名称:" class="addContent"  :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.hpName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否拥有房产证:" class="addContent"  :label-width="formLabelWidth">
            <el-radio disabled v-model="lookForm.hpHave" value="0" label="0">是</el-radio>
            <el-radio disabled v-model="lookForm.hpHave" value="1" label="1">否</el-radio>
          </el-form-item>
          <el-form-item  label="产权性质:"  class="addContent"  :label-width="formLabelWidth">
            <el-select disabled v-model="lookForm.hpProperty" placeholder="请选择">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="房屋坐落:" class="addContent"  :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.hpAddress" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="房屋结构:" class="addContent"  :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.hpStructure" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="层数:" class="addContent"  :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.hpLayer" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item  label="建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.hpArea" autocomplete="off" placeholder="㎡"></el-input>
          </el-form-item>
          <el-form-item  label="套内建筑面积:" class="addHouseArea"  :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.hpInsideArea" autocomplete="off" placeholder="㎡"></el-input>
          </el-form-item>
          <el-form-item  label="状态:" class="addContent"  :label-width="formLabelWidth">
            <el-radio disabled v-model="lookForm.hpPropertyStatus"  label="0">正常</el-radio>
            <el-radio disabled v-model="lookForm.hpPropertyStatus"  label="1">已核销</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="dialogVisible = false" type="primary" >确 定</el-button>
        </div>
      </el-dialog>


      </div>
      
    </div>
  </template>
    
  <script>
   import { mapGetters,mapActions } from 'vuex';
   import axios from '../../utils/axios';
   import timechuli from "./../../utils/timechuli";

  export default {
   
    data() {
      return {
        currentPage:1,
        pageSize:10,
        total:50,
        addCurrentPage:1,
        addPageSize:10,
        addTotal:50,
        dialogFormVisible: false,//添加对话框显示
        iconFormVisible: false,//编辑对话框显示
        dialogVisible:false,//查看详情对话框显示
        input: '',
        value2: '',
        formLabelWidth:"120px",
        radio: '1',
        options: [{
          value: "0",
          label: '集体所有房产'
        }, {
          value: "1",
          label: '私有房产'
        }, {
          value: "2",
          label: '联营企业房产'
        }],
        value: '',
        //数据展示
        houseReformList:[],
        //添加模态框的数据
        housePropertyList:[],
        //选择的批量删除
        deleteData:[],
        //选择的批量添加
        addData:[],
         //添加表单数据
         addForm:{
          value1: "",
        text: "",
        },
         //修改数据
         editForm:{
          hpNumber:'',
          hpName:'',
          hpHave:'',
          hpProperty:'',
          hpAddress:'',
          hpStructure:'',
          hpLayer:'',
          hpArea:'',
          hpInsideArea:'',
          hpPropertyStatus:'',
          hpChangeTime:''
        },
         //查看
         lookForm:{
          hpNumber:'',
          hpName:'',
          hpHave:'',
          hpProperty:'',
          hpAddress:'',
          hpStructure:'',
          hpLayer:'',
          hpArea:'',
          hpInsideArea:'',
          hpPropertyStatus:'',
          hpChangeTime:''
        }
      };
    },
    //   发起请求
    methods: {
      ...mapActions(["setTest"]),
      getTest(){
        let res=this.getTest(this.id);
        if(res.code==200){
          alert("成功")
        }
      },
        //数据展示
      getList(){
        this.$axios.post('houseProperty/reform/page',{"limit":10,"page":1,hpName:this.input}).then((r)=>{
          console.log(r.data.data);
          this.houseReformList=r.data.data;
          this.total=r.data.count
        })
      },
      //添加模态框里的数据
      getData(){
        this.$axios.post('houseProperty/registration/page',{"limit":10,"page":1,hpName:this.input}).then((r)=>{
          console.log(r.data.data);
          this.housePropertyList=r.data.data;
          this.addTotal=r.data.count
          
        })
      },
        //分页
        handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        console.log("当前页码",currentPage);
        axios({
          url:'houseProperty/reform/page',
          method:'post',
          data:{"page":currentPage,"limit":this.pageSize}
        }).then((r)=>{
          console.log(r.data.data);
          this.houseReformList=r.data.data
        })
      },
      //pageSize改变事件
      handleSizeChange(currentPage){
        console.log(currentPage);
        this.pageSize=currentPage;
        this.getList();
      },


        //添加分页事件
        addHandleCurrentChange(addCurrentPage){
        this.addCurrentPage=addCurrentPage;
        console.log("当前页码",addCurrentPage);
        axios({
          url:'houseProperty/registration/page',
          method:'post',
          data:{"page":addCurrentPage,"limit":this.addPageSize}
        }).then((r)=>{
          console.log(r.data.data);
          this.housePropertyList=r.data.data
        })
      },
      //pageSize改变事件
        addHandleSizeChange(addCurrentPage){
        console.log(addCurrentPage);
        this.addPageSize=addCurrentPage;
        this.getData()
      },
      //传输复选框的值
      handleSelectionChangeDepartment(val){
        this.deleteData=val;
        this.addData=val;
        // console.log(val);
        // console.log(this.deleteData);
        // console.log(this.addData);
      },
      //添加
      async addReform(){
        if(this.addData.length==0){
        this.$message.error("您还没有勾选房产");
        return false
       };
       console.log(this.addForm.text);
       let AddContent=[];
       let j;
       for (let i = 0; i < this.addData.length; i++) {
       j=this.addData[i].id;
        // AddContent.push(j.id)
      
      };
      console.log(j);
      let time =''
      let time1=''
      if (this.addForm.value1) {
        time = timechuli.msToDate(this.addForm.value1[0]);
        time1 = timechuli.msToDate(this.addForm.value1[1])
      }
      
      let list = {
        id: j,
        hpTransformationContent: this.addForm.text,
        hpRenovationEndTime: time1,
        hpRenovationStartTime: time
      };
       console.log(AddContent);
        const {data:res}=await this.$axios.post('houseProperty/reform/add',list);
        if(res.code !==200){
          console.log(res);
            this.$message.error('添加失败！')
          }
          console.log(res);
          this.$message.success('添加成功！');
          this.addForm.value1="";
        this.addForm.text="";
          //添加框隐藏
          this.dialogFormVisible=false;
          //重新获取列表
          this.handleCurrentChange();
          this.getList();

      },
       //点击按钮，删除房产
     async removeHouseById(id){
        console.log(id);
        //弹框确认
        const confirmResult= await this.$confirm('此操作将永久删除该房产, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
           return err
        });
        //确认删除返回confirm,取消返回cancel
        console.log(confirmResult);
        if(confirmResult!=='confirm'){
          return this.$message.info('取消删除')
        }
        console.log('确认删除');
        const {data:res} = await this.$axios.post('houseProperty/reform/delete', id);
        if(res.code !==200){
          return this.$message.error('删除失败！')
        }
        this.$message.success('删除成功！');
        this.handleCurrentChange();
        this.getList();

      },
      //批量删除
      async removeHouseByIds(){
        //判断有没有选择
       if(this.deleteData.length==0){
        this.$message.error("您还没有勾选房产");
        return
       };
       //创建一个空数组接受复选框的值
       let DeleteContent=[];
       for (let i = 0; i < this.deleteData.length; i++) {
        let j=this.deleteData[i];
        DeleteContent.push(j.id)
        
       }
       console.log(DeleteContent);
       const confirmResult= await this.$confirm('此操作将永久删除这些房产, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
           return err
        });
        //确认删除返回confirm,取消返回cancel
        console.log(confirmResult);
        if(confirmResult!=='confirm'){
          return this.$message.info('取消删除')
        }
        console.log('确认删除');
        const {data:res} = await this.$axios.post('houseProperty/reform/deletes/', DeleteContent);
        if(res.code !==200){
          return this.$message.error('删除失败！')
        }
        this.$message.success('删除成功！');
        //重新渲染数据
        this.handleCurrentChange();
        this.getList();

      },
       //修改模态框事件
       async editDialog(id){
        const {data:res}= await this.$axios.get('houseProperty/reform/findById/'+id);
       
        this.editForm=res.data;
        this.editForm.hpHave=""+res.data.hpHave;
        this.editForm.hpPropertyStatus=""+res.data.hpPropertyStatus;
        this.editForm.hpProperty=""+res.data.hpProperty;
        this.iconFormVisible=true;
        console.log(id);
      },
      //修改房产信息并且提交
      editHouse(){
        this.$refs.editFormRef.validate(async valid=>{
          console.log(valid);
          //发起请求
          const data = await this.$axios.put('/houseProperty/reform/update',
          {id:this.editForm.id,hpNumber:this.editForm.hpNumber,hpName:this.editForm.hpName,hpHave:this.editForm.hpHave,hpProperty:this.editForm.hpProperty,hpAddress:this.editForm.hpAddress,hpStructure:this.editForm.hpStructure,hpLayer:this.editForm.hpLayer,hpArea:this.editForm.hpArea,hpInsideArea:this.editForm.hpInsideArea,hpPropertyStatus:this.editForm.hpPropertyStatus}
          ).then(()=>{
            this.iconFormVisible=false;
        //刷新数据
        this.handleCurrentChange();
        this.getList();

          })
        })
        //提示成功
        this.$message.success('编辑房产成功！')
      },

      
        //查看模态框事件
        async lookDialog(id){
        const {data:res}= await this.$axios.get('houseProperty/reform/findById/'+id);
       
        this.lookForm=res.data;
        this.lookForm.hpHave=""+res.data.hpHave;
        this.lookForm.hpPropertyStatus=""+res.data.hpPropertyStatus;
        this.lookForm.hpProperty=""+res.data.hpProperty;
        this.dialogVisible=true;
        console.log(id);
      },
        //监听添加对话框关闭事件
        addDialogClosed(){
        this.$refs.addFormRef.resetFields()
      },
     
     
    },
    mounted(){
      this.getList(),
      this.getData()
    },
    computed:{},
    created() {
      this.getList(),
      this.getData()
    }
   
  };
  </script>
    
  <style scoped>
  .nei{

    width: 100%;
  }
  .box1{
    padding: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .title span{
    font-size: 16px;
    font-weight: 400;
  }
  .headimg {
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
  .add{
   padding: 12px; 
   border-radius: 8px;
   background-color: #363b64;
  
   
  }
  .goIn{
    width: 350px;
    margin-left: 15px;
    height: 32px;
  }
  .goIn2{
    width: 350px;
    
    height: 32px;
  }
  .goDate{
    width: 200px;
  }
  .content{
    margin-top: 20px;
    width: 100%;
  }
  .dr{
    float: right;
    margin-left: 20px;
  }
  .contentTitle{
    overflow: hidden;
  }
  .contentTitle2{
    overflow: hidden;
    margin-top: 15px;
  }
  .change{
   font-size: 14px; 
   font-weight: 400;
   margin-left: 20px;
  }
  .change2{
    font-size: 14px; 
   font-weight: 400;
  }
  .contentTitleSearch{
    margin-left: 20px;
  }
  .addContent{
    width: 420px;
    margin-left: 80px;
  }
  .addHouseArea{
    width: 350px;
    margin-left: 80px;
  }
  .bottomDelete{
    overflow: hidden;
  }
  .reason{
    width: 500px;
  }
  </style>
    